关于在Vue中使用ref(此.$refs未定义 undefind) | 您所在的位置:网站首页 › vue动态设置元素高度 dom没有挂载 › 关于在Vue中使用ref(此.$refs未定义 undefind) |
vue的ref(this.$refs获取为undefined)
如果你获取到的总是空的,你注意一下: 1.你在哪里调用,和你调用的对象试试在mounted()里面调用有效果没有 调用的对象是本来就存在的,还是需要数据渲染之后才会出现的,同理,在mounted()里面调用看看 2.调用对象是不是数组列表我一开始设置ref在v-for列表上,直接获取this.$refs.name.style,永远是空的, 后来才发现,this.$refs.name是一个数组,无法通过 .style 获取样式, 只能遍历这个this.$refs.name数组,在this.$refs.name[index]上设置样式 // 6.14 更新,这个说法有点问题 但是像高度宽度,可以通过offsetHeight,等来获取。 3.调用对象是否和v-if结合使用ref不是响应式的,所有的动态加载的模板更新它都无法相应的变化。 解决方案: 通过 1 2 3 setTimeout(() => { }, 0) 来得到数据 vue的$refs属性几个注意点 1.在vue中获取dom推荐使用$refs来获取 可是有时会出现 this.$refs.xxx 为undefined的情况。 场景1:在created()里使用 在这个生命周期中进行数据观测 ,属性和方法的运算,watch 事件回调。但是页面还没有挂载上去,没有e l 属 性 , t h i s . el 属性,this.el属性,this.refs无法调用dom。 解决办法:换成在mounted()里使用 场景2:父元素或当前元素使用了v-if或v-show 因为$refs不是响应式的,只在组件渲染完成后才会生效,在初始渲染的时候是不存在的。 因为是非响应式的,所有动态加载的模板更新它都无法相应的变化。 解决办法:可以通过setTimeout(()=>{…}, 0)来实现。 2.如果使用v-for遍历加ref时可以使用 :,即 :ref ="variable" ,这样得到的是不同的ref。 1 2 3 4 5
//this.$refs[`refName${index}`]每一项都是一个仅包含一个元素的数组 this.$refs[`refName${index}`][0].fun();//调用第一个组件内的方法 但是也可以不使用 :,这时得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。 1 2 3 4 5
//this.$refs.refName是一个包含了对应数据源的这些子组件的数组 this.$refs.refName[0].fun();//调用第一个组件内的方法 以上为个人经验,希望能给大家一个参考,也希望大家多多支持站圈网。 |
CopyRight 2018-2019 实验室设备网 版权所有 |